//导入系统的axios
import axios from 'axios';
//引入qs
import qs from 'qs';
import Vue from 'vue';
//配置api的基础路径.所有通过axios发起的请求都会以该路径为基础
axios.defaults.baseURL = process.env.VUE_APP_ROOTAPI;

// 请求的拦截器,所有的请求都会经过这个拦截器
axios.interceptors.request.use(function (config) {
    // Do something before request is sent在发起请求前做的事情
    const token = localStorage.getItem("token");
    // 为每个请求头都添加认证TOKEN,注意由于后台使用的是JSON WEB TOKEN,
    //所有token 之前要带上 Bearer空格
    //当我们在请求头里带上token的时候,浏览器默认将这个请求视作复杂请求
    /*当请求被视作复杂请求的时候,浏览器会对服务器发起两次请求
        第一次请求: OPTIONS,这个请求的作用,检测是否能够正常连接服务器
        第二次请求: get/post,这个请求就是正式请求数据
    */
    config.headers.common['Authorization'] = 'Bearer '+token;
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
 
//响应的拦截器
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
});

var myAxios = {
	get:(url,params)=>{
        return axios.get(url,{params:params})
        .then((resp)=>{
            return resp;
        })
    },
    //config一般处理图片上传
    post:(url,params,config)=>{
        return axios.post(url,qs.stringify(params),config)
        .then((resp)=>{
            return resp;
        })
    }
}
//将封装好的axios对象注册成全局变量,可以在所有组件通过this.$http的方式访问该对象
Vue.prototype.$http = myAxios;
//导出一个对象
export default myAxios;
